<template>
  <div style="padding: 10px">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card shadow="hover" style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <img :src="user.avatar" style="width: 60px; height: 60px; border-radius: 50%;" />
          <h4 style="color: #1296db;">{{ user.nickName }}</h4>
          <span><b style="color: #1296db;">欢迎来到务川县医院疫苗预约后台管理系统</b></span>
        </el-card>

        <el-col :span="12" style="margin-top: 12px; padding: 0;float: right;">
          <el-card shadow="hover" style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
            <img src="@/assets/做核酸.png" style="height:188px; " />
          </el-card>
        </el-col>
        <el-col :span="12" style="margin-top: 12px; padding: 0;">
          <el-card shadow="hover" style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
            <img src="@/assets/抗疫必胜.png" style="height:188px;" />
          </el-card>
        </el-col>
      </el-col>
      <el-col :span="16"  >
        <el-card shadow="hover" style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <div id="myChart" :style="{ width: '100%', height: '350px' }"></div>
        </el-card>
      </el-col>

    </el-row>
    <el-cart shadow="hover" style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <div id="myChart1" :style="{ width: '100%', height: '500px' }"></div>
    </el-cart>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Home",
  data() {
    return {
      user: {},
    }
  },
  mounted() {
    let userStr = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(userStr)
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$root.echarts.init(document.getElementById('myChart'))
      let myChart1 = this.$root.echarts.init(document.getElementById('myChart1'))
      let option = {
        title: {
          text: '各地区用户比例统计图',
          subtext: '社区数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          trigger: 'item',
          left: 'left'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            // dataView: { show: true, readOnly: true },
            // restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '用户比例',
            type: 'pie',
            radius: [30, 150],
            center: ['60%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 10
            },
            data: []
          }
        ]
      };


      let option1 = {
        title: {
          text: '疫苗预约线性图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['国药中生北京公司灭活疫苗', '国药中生武汉公司灭活疫苗', '北京科兴中维公司灭活疫苗', '天津康希诺腺病毒载体疫苗', '智飞生物重组新冠疫苗(CHO细胞)']
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周末'],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '国药中生北京公司灭活疫苗', itemStyle: {
              normal: {
                color: '#FF005A',
                lineStyle: {
                  color: '#FF005A',
                  width: 2
                },
                areaStyle: {
                  color: '#D7D2D3'
                }
              }
            },
            type: 'line',
            stack: 'Total',
            smooth: true,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '国药中生武汉公司灭活疫苗', itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#D7D2D3'
                }
              }
            },
            type: 'line',
            smooth: true,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            data: [220, 182, 91, 234, 290, 330, 510]
          },
          {
            name: '北京科兴中维公司灭活疫苗', itemStyle: {
              normal: {
                color: '#E4B878',
                lineStyle: {
                  color: '#E4B878',
                  width: 2
                },
                areaStyle: {
                  color: '#D7D2D3'
                }
              }
            },
            type: 'line',
            smooth: true,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            data: [150, 232, 201, 354, 190, 330, 410]
          },
          {
            name: '天津康希诺腺病毒载体疫苗', itemStyle: {
              normal: {
                color: '#49C7D0',
                lineStyle: {
                  color: '#49C7D0',
                  width: 2
                },
                areaStyle: {
                  color: '#D7D2D3'
                }
              }
            },
            type: 'line',
            smooth: true,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            data: [220, 332, 101, 334, 290, 330, 120]
          },
          {
            name: '智飞生物重组新冠疫苗(CHO细胞)', itemStyle: {
              normal: {
                color: '#E9C049',
                lineStyle: {
                  color: '#E9C049',
                  width: 2
                },
                areaStyle: {
                  color: '#D7D2D3'
                }
              }
            },
            type: 'line',
            smooth: true,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            data: [120, 232, 501, 334, 190, 330, 320]
          },
        ],
      };
      request.get("/user/count").then(res => {
        if (res.code === '0') {
          res.data.forEach(item => {
            option.series[0].data.push({ name: item.address, value: item.count })
          })
          // 绘制图表
          myChart.setOption(option);
          myChart1.setOption(option1);
        }
      })

    }
  }
}
</script>

